<template name="image-swiper">
	<view class="cp">
		<swiper class="swp" :current="index" previous-margin="40rpx" next-margin="40rpx" easing-function="easeOutCubic">
			<swiper-item v-for="(item,index) in (imageDetailArray)" :key="item.index" class="swp-item">
				<view class="swp-item-content" v-show="!item.showComments">
					<image class="swp-item-img" :src="item.path" mode="widthFix"></image>
					<view class="swp-item-title">{{item.name}}</view>
					<view class="swp-item-desc">{{item.detail}}</view>
					<view class="swp-item-foot">
						<view class="swp-item-star-btn" @click="starOperation(index, item.id)" v-if="starBtn">
							<text :class="'iconfont iconCollectionon '+(item.myStar?'mystar':'')"></text> {{item.myStar?'':'收藏'}}
						</view>
						<view class="swp-item-star-btn" @click="showComment(index, item.id)">
							评论
							<text v-if="item.commentCnt>0"> ({{item.commentCnt}})</text>
						</view>
						<view class="swp-item-star-btn" @click="voteOperation(index, item.id)">
							<text :class="'iconfont icondianzan '+(item.myUpvote ? 'myvote' : '')"></text>
							<!-- 喜欢 -->
							<text v-if="item.upvote>0"> ({{item.upvote}})</text>
						</view>
					</view>
				</view>
				<view class="swp-item-comment" v-if="item.showComments">
					<image-comments :imageId="parseInt(item.id)" @tapdetail="hideComment(index, item.id)"></image-comments>
				</view>
			</swiper-item>
		</swiper>
		<view class="close">
			<icon type="cancel" color="#666" size="32" @click="hideComponent"></icon>
		</view>
	</view>
</template>

<script>
	import ImageComments from './image-comments.vue'
	import utils from '../common/function.js'
	import {
		CrystalImage
	} from '../common/service.js'
	const IMAGE = new CrystalImage()

	export default {
		name: "image-swiper",
		components:{
			ImageComments
		},
		props: {
			starBtn: {
				type: Boolean,
				default: true,
			},
			index: {
				type: Number,
				default: 0,
			},
			imageArray: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				imageDetailArray: this.imageArray
			};
		},
		watch: {
			imageArray: {
				immediate: true,
				handler: async function(value) {
					// console.log('imageArray update', value)
					if (value.length > 0 && !value[0].name) {
						this.imageDetailArray = (await IMAGE.getList(value.map(i => i.id))).map(img=>{
							img.showComments = false
							return img
						})
					}
				},
			}
		},

		methods: {
			starOperation: utils.freq(800, function(index, imgId) {
				let isCancel = false
				this.imageDetailArray = this.imageDetailArray.map(img => {
					if (img.id == imgId) {
						isCancel = img.myStar
						img.myStar = !img.myStar
					}
					return img
				})
				if (isCancel) {
					IMAGE.cancelStar(imgId)
					this.$emit('starimg', imgId)
				} else {
					IMAGE.star(imgId) // async
					this.$emit('cancelstarimg', imgId)
				}
			}),

			voteOperation: utils.freq(800, function(index, imgId) {
				let isCancel = false
				this.imageDetailArray = this.imageDetailArray.map(img => {
					if (img.id == imgId) {
						isCancel = img.myUpvote
						img.myUpvote = !img.myUpvote
						if (isCancel) img.upvote--
						else img.upvote++
					}
					return img
				})
				if (isCancel) {
					IMAGE.cancelUpvote(imgId)
					this.$emit('cancelvote', imgId)
				} else {
					IMAGE.upvote(imgId)
					this.$emit('upvote', imgId)
				}
			}),

			hideComponent: utils.freq(800, function() {
				this.$emit('ontapcancel')
			}),
			showComment(index, imgId){
				// console.log(index, imgId)
				this.imageDetailArray = this.imageDetailArray.map((img, i) => {
					if (img.id == imgId && i==index) {
						img.showComments=true
					}
					return img
				})
			},
			hideComment(index, imgId){
				// console.log(index, imgId)
				this.imageDetailArray = this.imageDetailArray.map((img, i) => {
					if (img.id == imgId && i==index) {
						img.showComments=false
					}
					return img
				})
			}
		}
	}
</script>

<style>
	@import "../static/weui.min.css";

	.cp {
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.swp {
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.9);
	}

	.swp-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.swp-item-content {
		margin: 0 36rpx;
		background-color: #2d3132;
		border-radius: 10px;
		/* padding: 6px 0; */
		border: none;
		box-shadow: 0px 0px 16px 0px rgb(181, 196, 228);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		color: #999;
		text-align: center;
	}
	
	.swp-item-comment {
		margin: 0 36rpx;
		background-color: #2d3132;
		border-radius: 10px;
		height: 80vh;
		border: none;
		box-shadow: 0px 0px 16px 0px rgb(181, 196, 228);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		color: #999;
		text-align: center;
	}

	.swp-item-img {
		width: 100%;
	}

	.swp-item-title {
		color: #FFF;
		font-size: large;
		background-color: #2d3132;
	}

	.swp-item-desc {
		background-color: #2d3132;
	}

	.swp-item-foot {
		margin: 20px 0 16px 0;
		display: flex;
		justify-content: space-around;
		font-size: small;
	}

	.swp-item-star-btn {
		border: 1px solid #666;
		color: #666;
		background-color: #2d3132;
		padding: 2px 6px;
		border-radius: 4px;
	}

	.mystar {
		color: rgb(250, 158, 19)
	}

	.myvote {
		color: #F33;
	}

	.close {
		position: fixed;
		bottom: 20px;
		left: 0px;
		right: 0px;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.close-btn {
		color: #666;
		border: 1px solid #666;
		padding: 2px 6px 0 6px;
		border-radius: 4px;
	}
</style>
